<template>
	<view class="userinfo">
		<form @submit="save">
			<view class="info-input">
				<view class="title">
					昵称：
				</view>
				<input :value="name" type="nickname" name="name" placeholder="请输入昵称" />
			</view>
			<button class="btn" form-type="submit">保存昵称</button>
		</form>
	</view>
</template>

<script>
	import {
		UserInfo,
		changeNickName
	} from "@/api/api.js"
	export default {
		data() {
			return {
				name: '',
				info: [],
				avatarUrl: ''
			}
		},
		onLoad() {
			this.UserInfo()
		},
		methods: {
			chooseavatar(e) {
				var that = this
				uni.uploadFile({
					url: that.$config.requestUrl +
						'/common/upload',
					header: {
						'tokens': uni.getStorageSync('tokens')
					},
					formData: {
						accept: 'image',
						is_avatar: 1
					},
					filePath: e.detail.avatarUrl,
					name: 'UploadFile',
					success: (res) => {
						uni.hideLoading()
						let imgRes = JSON.parse(res.data); //微信和头条支持
						if (imgRes.code == 0) {
							let imgData = imgRes.data
							that.avatarUrl = imgData.path
						} else {
							uni.$showMsg(imgRes.msg)
							return
						}
					},
					fail(err) {
						uni.hideLoading()
					}
				})
			},
			changeImg() {
				let that = this
				uni.chooseImage({
					sourceType: ['album', 'camera'], //从相册选择
					count: 1,
					success: (res) => {
						let igmFile = res.tempFilePaths;
						uni.showLoading({
							mask: true,
							title: '加载中'
						})
						uni.uploadFile({
							url: that.$config.requestUrl +
								'/common/upload',
							header: {
								'tokens': uni.getStorageSync('tokens')
							},
							formData: {
								accept: 'image',
								is_avatar: 1
							},
							filePath: igmFile[0],
							name: 'UploadFile',
							success: (res) => {
								uni.hideLoading()
								let imgRes = JSON.parse(res.data); //微信和头条支持
								if (imgRes.code == 0) {
									let imgData = imgRes.data
									that.avatarUrl = imgData.path
								} else {
									uni.$showMsg(imgRes.msg)
									return
								}
							},
							fail(err) {
								uni.hideLoading()
							}
						})
					},
				});
			},
			save(e) {
				let that = this
				let name = e.detail.value.name
				changeNickName({
					name
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					if (res.code == 0) {
						setTimeout(() => {
							let pages = getCurrentPages(); //获取所有页面栈实例列表
							let nowPage = pages[pages.length - 1]; //当前页页面实例
							let prevPage = pages[pages.length - 2]; //上一页页面实例
							prevPage.$vm.info.nickname = name; //修改上一页data里面的tagIndex 参数值
							uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
								delta: 1
							});
						}, 500)
					}
				})
			},
			UserInfo() {
				UserInfo().then(res => {
					if (res.code == 0) {
						this.info = res.data.user
						if (!res.data.user) {
							uni.switchTab({
								url: '/pages/user/index'
							})
							return false
						}
						this.name = this.info.nickname
						this.avatarUrl = res.data.user.avatar_path
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	button {
		&::after {
			border: 0;
		}
	}

	.userinfo {
		.top {
			text-align: center;
			padding-top: 20px;

			image {
				width: 100px;
				height: 100px;
				border-radius: 50%;
			}
		}

		.info-input {
			padding: 5%;
			font-size: 14px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			input {
				height: 40px;
				background-color: #fff;
				padding-left: 40rpx;
				width: 80%;
			}
		}
	}
</style>